<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uniswap</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="../js/link.js"></script>
    <!-- <script src="../js/metamask.js"></script> -->
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="nav">
        <div class="connect" onmouseover="this.style.border='1px solid rgba(243, 217, 229)'"
            onmouseout="this.style.border='1px solid rgba(253, 234, 241)'">
            <button class="shubiao  enableEthereumButton">
                <p>Connect to a wallet</p>
            </button>
        </div>
    </div>
    <div class="main">
        <div class="main_up">
            <div class="left">
                <p>Swap</p>
            </div>
            <div class="right shubiao" onmouseout="this.style.color='rgb(86, 90, 105)'"
                onmouseover="this.style.color='rgb(137, 140, 150)'"></div>
        </div>
        <div class="main_mid1" id="a" onmouseover="this.style.border='1px solid rgba(206, 208, 217)'"
            onmouseout="this.style.border='1px solid rgba(237, 238, 242)'">
            <div class="box_up">
                <button class="shubiao" onmouseover="this.style.backgroundColor='rgba(237, 238, 242)'"
                    onmouseout="this.style.backgroundColor='#fff'">
                    <img src="../img/zhinanzhen.png" alt="">
                    <div class="describe">
                        <span>ETH</span>
                    </div>
                </button>
                <input type="text" value="0.0">
            </div>
            <div class="box_down">
                -
                <div class="left">$-</div>
            </div>
        </div>
        <div class="next shubiao" onmouseover="this.style.color='rgba(173, 177, 187)'"
            onmouseout="this.style.color='rgba(155, 159, 171)'"></div>
        <div class="main_mid2" id="b" onmouseover="this.style.border='1px solid rgba(206, 208, 217)'"
            onmouseout="this.style.border='1px solid rgba(237, 238, 242)'">
            <div class="box_up">
                <button class="shubiao" onmouseover="this.style.backgroundColor='rgba(230, 0, 110)'"
                    onmouseout="this.style.backgroundColor='#FF007A'">
                    <span>选择通证</span>
                </button>
                <input type="text" value="0.0">
            </div>
            <div class="box_down">
                -
                <div class="left">$-</div>
            </div>
        </div>
        <div class="main_down">
            <button class="shubiao enableEthereumButton" onmouseover="this.style.backgroundColor='rgba(252, 220, 232)'"
                onmouseout="this.style.backgroundColor='rgba(253, 234, 241)'">Connect Wallet
                <a href="" target="_self" style="display: inline;"></a>
            </button>
        </div>

    </div>
    </div>
    <script>
 
        var $a = $('#a');
        var $b = $('#b');
        var $next = $('.next');
        var count = 0;
        $next.click(function () {
            count++;
            if ((count % 2) != 0) {
                $('#b').after($('#a'));
            } else {
                $('#a').after($('#b'));
            }

        })
        const ethereumButton = document.querySelector('.enableEthereumButton');

        ethereumButton.addEventListener('click', () => {
            //Will Start the metamask extension
            if (window.ethereum.enable() == true) {
                ethereum.request({ method: 'eth_requestAccounts' });
            }
        });
    </script>
</body>

</html>